<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>行走的白领</title>
</head>
<body>

<audio src="audio/music.mp3" id="BG" hidden="true" autoplay="true" loop="loop">
</audio>


<script>
var count = 0, x = 300, y = 300;	

var background = new Image() ;
background.src = "img/background3.png" ;
	  
var sprite = new Image() ;
sprite.src = "img/person.png" ;

var canvas = document.createElement("canvas") ;
document.body.appendChild(canvas) ;

canvas.width = 1000 ;
canvas.height = 685 ;

	
function draw() 
{	  
    var context = canvas.getContext("2d") ;
    context.drawImage(background, 0, 0) ;
	switch(count) 
	{
		case 0:
			context.drawImage(sprite, 120, 570, 90, 172, x, y, 90, 172);
			count++;
			
			break;
		
		case 1:
			context.drawImage(sprite, 205, 570, 90, 172, x, y, 90, 172);
			count++;
			count=1;
			break;
			
		case 2:
			context.drawImage(sprite, 280, 570, 90, 172, x, y, 90, 172);
			count++;
			
			break;
		
		case 3:
			context.drawImage(sprite, 370, 570, 77, 172, x, y, 77, 172);
			count++;
			
			break;
		
		case 4:
			context.drawImage(sprite, 447, 570, 105, 172, x, y, 105, 172);
			count++;
			
			break;
		
		case 5:
			context.drawImage(sprite, 547, 570, 90, 172, x, y, 90, 172);
			count++;
			
			break;
	
		case 6:
			context.drawImage(sprite, 620, 570, 90, 172, x, y, 90, 172);
			count++;
			
			break;
		
		case 7:
			context.drawImage(sprite, 710, 570, 90, 172, x, y, 90, 172);
			count=0;
			
			break;
			
    }
}
	 
window.onload = setInterval(draw, 100) ;
</script>

</body>
</html>